<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindAR - GitHub资源演示</title>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.3/dist/mindar-image-aframe.prod.js"></script>
    <style>
        body { margin: 0; padding: 20px; background: #1a1a1a; color: white; font-family: Arial; }
        .target-info { background: rgba(0,0,0,0.9); padding: 20px; border-radius: 10px; margin-bottom: 20px; }
        .target-image { max-width: 300px; border: 3px solid #4CAF50; border-radius: 10px; }
        .status { background: rgba(0,0,0,0.8); padding: 15px; border-radius: 10px; margin-top: 20px; }
    </style>
</head>
<body>
<div class="target-info">
    <h3>🎯 MindAR GitHub资源演示</h3>
    <p>扫描以下目标图片：</p>
    <img src="./images/card.png" class="target-image" alt="目标图片">
    <p><em>将手机摄像头对准此图片查看AR效果</em></p>
</div>

<a-scene
        mindar-image="imageTargetSrc: ./models/card.mind; autoStart: true;"
        embedded
        vr-mode-ui="enabled: false"
        style="width: 100%; height: 60vh;">

    <a-camera active="false"></a-camera>

    <a-entity mindar-image-target="targetIndex: 0">
        <!-- 3D物体组 -->
        <a-box position="0 0.5 0" color="red" scale="0.4 0.4 0.4"
               animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-box>

        <a-sphere position="0.7 0.5 0" radius="0.2" color="blue"
                  animation="property: position; to: 0.7 0.8 0; loop: true; dur: 2000; dir: alternate"></a-sphere>

        <a-cylinder position="-0.7 0.5 0" radius="0.15" height="0.4" color="green"
                    animation="property: rotation; to: 360 0 0; loop: true; dur: 3000"></a-cylinder>

        <a-text value="GitHub资源测试" position="0 1.2 0" align="center" color="white" scale="1.5 1.5 1.5"></a-text>
    </a-entity>
</a-scene>

<div class="status" id="status">
    <h4>系统状态</h4>
    <div id="statusText">初始化中...</div>
</div>

<script>
    const statusText = document.getElementById('statusText');
    const scene = document.querySelector('a-scene');

    scene.addEventListener('loaded', () => {
        statusText.innerHTML = '✅ 场景加载完成<br>等待摄像头...';
    });

    scene.addEventListener('mindar-target-found', (e) => {
        statusText.innerHTML = `🎉 目标识别成功!<br>目标索引: ${e.detail.targetIndex}`;
        statusText.style.color = '#4CAF50';
    });

    scene.addEventListener('mindar-target-lost', (e) => {
        statusText.innerHTML = '目标丢失，重新扫描中...';
        statusText.style.color = '#FF9800';
    });

    // 错误处理
    scene.addEventListener('mindar-error', (e) => {
        statusText.innerHTML = `❌ 错误: ${e.detail.message}`;
        statusText.style.color = 'red';
    });
</script>
</body>
</html>